<!--客户信息管理-->
<template>
  <!--  营销管理页面  -->
  <div class="max">
    <div class="div1">
      <el-input v-model="Customer.name" placeholder="客户名" class="el-input-1"/>
      <el-input v-model="Customer.khno" placeholder="客户编号" class="el-input-1"/>
      <el-select v-model="Customer.value_area" placeholder="客户所属地区" class="el-input-1">
        <el-option v-for="item in Customer.area" :key="item.value" :label="item.value" :value="item.value">
          <span style="float: left">{{ item.value }}</span>
          <span style="float: right; color: var(--el-text-color-secondary);margin-left: 22px">{{ item.label }}</span>
        </el-option>
      </el-select>
      <el-select v-model="Customer.value_xyd" placeholder="客户信用度" class="el-input-1">
        <el-option v-for="item in Customer.xyd" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-input v-model="Customer.fr" placeholder="法人代表" class="el-input-1"/>
      <el-select v-model="Customer.value_isValid" placeholder="有效状态" class="el-input-1">
        <el-option v-for="item in Customer.isValid" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="Customer.value_state" placeholder="流失状态" class="el-input-1">
        <el-option v-for="item in Customer.state" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="Customer.value_level" placeholder="客户级别" class="el-input-1">
        <el-option v-for="item in Customer.level" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-badge is-dot>
        <el-button type="primary" @click="searchData" style="margin-left: 10px">
          <el-icon style="vertical-align: middle;">
            <search/>
          </el-icon>
          <span style="vertical-align: middle;"> 搜索 </span>
        </el-button>
      </el-badge>
      <!--重置清空按钮-->
      <el-tooltip placement="top">
        <template #content>清空搜索框</template>
        <el-button type="primary" @click="empty" style="margin-left: 20px">
          <el-icon>
            <refresh-left />
          </el-icon>
          <span style="vertical-align: middle;"> 重置 </span>
        </el-button>
      </el-tooltip>

    </div>
    <div class="div2">
      <div class="div3">
        <el-badge is-dot>
          <el-button type="primary" class="" @click="addCustomer" style="background-color: #366CB3">
            <el-icon>
              <plus/>
            </el-icon>
            <span style="margin-left: 5px">添加</span>
          </el-button>
        </el-badge>
        <!--添加页面-->
        <customer-form @refresh-data="refreshData" ref="customerForm"/>
        <!--刷新表格-->
        <el-badge is-dot>
          <el-button circle @click="loadData(true)" style="margin-left: 20px">
            <el-tooltip placement="top">
              <template #content>刷新表格</template>
              <el-icon>
                <refresh-left />
              </el-icon>
            </el-tooltip>
          </el-button>
        </el-badge>
      </div>
      <!--客户信息表-->
      <div class="div4">
        <el-table :data="t_customer" border style="width: 100%; opacity: 0.7;" :header-cell-style="{textAlign: 'center'}"
                  v-loading="loading"
                  :element-loading-svg="svg"
                  class="custom-loading-svg"
                  element-loading-svg-view-box="-10, -10, 50, 50"
                  element-loading-text="正在加载客户信息表数据"
                  :cell-style="{ textAlign: 'center' }">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="编号" prop="id" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="客户编号" prop="khno" width="150" show-overflow-tooltip style="color: red"></el-table-column>
          <el-table-column fixed label="客户姓名" prop="name" width="120" show-overflow-tooltip  sortable></el-table-column>
          <el-table-column label="客户所属地区" prop="area" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="客户经理" prop="cusManager" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="客户级别" prop="level" width="120" show-overflow-tooltip>
            <template #default="s">
              <template v-if="s.row.level === '大客户'">
                <el-tag type="success">大客户</el-tag>
              </template>
              <template v-else-if="s.row.level === '重点开发客户'">
                <el-tag type="danger">重点开发客户</el-tag>
              </template>
              <template v-else-if="s.row.level === '战略合作伙伴'">
                <el-tag type="warning">战略合作伙伴</el-tag>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="流失状态" prop="state" width="120" show-overflow-tooltip>
            <template #default="s">
              <template v-if="s.row.state === 0">
                <el-tag>未流失</el-tag>
              </template>
              <template v-else>
                <el-tag type="danger">已流失</el-tag>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="有效状态" prop="isValid" width="120" show-overflow-tooltip>
            <template #default="s">
              <template v-if="s.row.isValid === 1">
                <el-tag type="success">有效</el-tag>
              </template>
              <template v-else>
                <el-tag type="info">无效</el-tag>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="客户信用度" prop="xyd" width="120" show-overflow-tooltip>
            <template #default="s">
              <template v-if="s.row.xyd === '0'">
                <el-tag type="danger" effect="dark">零星</el-tag>
              </template>
              <template v-if="s.row.xyd === '1'">
                <el-tag type="danger" effect="dark">一星</el-tag>
              </template>
              <template v-else-if="s.row.xyd === '2'">
                <el-tag type="danger" effect="dark">二星</el-tag>
              </template>
              <template v-else-if="s.row.xyd === '3'">
                <el-tag type="warning" effect="dark">三星</el-tag>
              </template>
              <template v-else-if="s.row.xyd === '4'">
                <el-tag type="warning" effect="dark">四星</el-tag>
              </template>
              <template v-else-if="s.row.xyd === '5'">
                <el-tag type="warning" effect="dark">五星</el-tag>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="客户地址" prop="address" width="150" show-overflow-tooltip>
            <template #default="s">
              {{getAddressLabel(s.row.address)}}
            </template>
          </el-table-column>
          <el-table-column label="邮编" prop="postCode" width="140" show-overflow-tooltip></el-table-column>
          <el-table-column label="联系电话" prop="phone" width="140" show-overflow-tooltip></el-table-column>
          <el-table-column label="传真" prop="fax" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="网址" prop="webSite" width="140" show-overflow-tooltip></el-table-column>
          <el-table-column label="营业执照注册号" prop="yyzzzch" width="150" show-overflow-tooltip></el-table-column>
          <el-table-column label="法人代表" prop="fr" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="注册资金" prop="zczj" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="年营业额" prop="nyye" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="开户银行" prop="khyh" width="140" show-overflow-tooltip></el-table-column>
          <el-table-column label="开户账号" prop="khzh" width="140" show-overflow-tooltip></el-table-column>
          <el-table-column label="地税登记号" prop="dsdjh" width="130" show-overflow-tooltip></el-table-column>
          <el-table-column label="国税登记号" prop="gsdjh" width="130" show-overflow-tooltip></el-table-column>
          <el-table-column label="客户满意度" prop="myd" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="创建时间" prop="createDate" width="180" show-overflow-tooltip sortable></el-table-column>
          <el-table-column label="更新时间" prop="updateDate" width="180" show-overflow-tooltip sortable></el-table-column>
          <el-table-column fixed="right" label="操作" width="160">
            <template #default="xxx">
              <el-tooltip placement="top">
                <template #content>修改客户信息</template>
                <el-button size="mini" circle @click="updateCustomer(xxx.row)">
                  <el-icon>
                    <edit />
                  </el-icon>
                </el-button>
              </el-tooltip>
              <el-tooltip placement="top">
                <template #content>删除客户信息</template>
                <el-button size="mini" type="danger" circle @click="deleteCustomer(xxx.row)" v-loading.fullscreen.lock="fullscreenLoading">
                  <el-icon>
                    <delete />
                  </el-icon>
                </el-button>
              </el-tooltip>
              <el-tooltip placement="top">
                <template #content>订单查看</template>
                <el-button size="mini" type="primary" circle @click="checkCustomer(xxx.row)" v-loading.fullscreen.lock="fullscreenLoading">
                  <el-icon>
                    <more />
                  </el-icon>
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页控件 -->
        <el-pagination background layout="total, prev, pager, next, jumper" :current-page="no" :page-size="size"
                       :total="total" @current-change="currentChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {ref} from "vue";
import {deleteCustomer, getMarCustomerPageInfo} from "../../../network/marcustomer";
import CustomerForm from "./form/CustomerForm.vue";
import {getAddressLabel} from "../../../common/city";

export default {
  name: "MarCustomer",
  components: {CustomerForm},
  data(){
    return{
      //加载
      svg: `
          <path class="path" d="
            M 30 15
            L 28 17
            M 25.61 25.61
            A 15 15, 0, 0, 1, 15 30
            A 15 15, 0, 1, 1, 27.99 7.5
            L 15 15
          " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
        `,
      //刷新表格
      loading: false,
      fullscreenLoading: false,
      Customer:{
        name: ref(''),//客户名
        khno: ref(''),//客户编号
        area:[
          {

          },
          {
            value: '北京',
            label: 'Beijing',
          },
          {
            value: '上海',
            label: 'Shanghai',
          },
          {
            value: '南京',
            label: 'Nanjing',
          },
          {
            value: '成都',
            label: 'Chengdu',
          },
          {
            value: '深圳',
            label: 'Shenzhen',
          },
          {
            value: '广州',
            label: 'Guangzhou',
          },
        ],
        value_area: '',//客户所属地区
        xyd: [
          {

          },
          {
            value: '0',
            label: '零星',
          },
          {
            value: '1',
            label: '一星',
          },
          {
            value: '2',
            label: '二星',
          },
          {
            value: '3',
            label: '三星',
          },
          {
            value: '4',
            label: '四星',
          },
          {
            value: '5',
            label: '五星',
          },
        ],
        value_xyd: null,//客户信用度
        fr: ref(''),//法人代表
        state: [
          {

          },
          {
            value: 0,
            label: '未流失',
          },
          {
            value: 1,
            label: '已流失',
          },
        ],
        value_state: null,//流失状态
        isValid:[
          {

          },
          {
            value: 0,
            label: '失效',
          },
          {
            value: 1,
            label: '有效',
          },
        ],
        value_isValid: null,//有效状态
        //客户级别
        level: [
          {

          },
          {
            value: '战略合作伙伴',
          },
          {
            value: '大客户',
          },
          {
            value: '重点开发客户',
          },
        ],
        value_level: null,
      },
      t_customer:[],
      no: 1,
      size: 7,
      total: 0,
      getAddressLabel
    }
  },
  methods: {
    //重置清空
    empty(){
      Object.assign(this.Customer,this.$options.data.call(this).Customer);
      this.$notify({
        title: '成功',
        message: '清空成功',
        type: 'success',
      })
    },
    //刷新
    refreshData(){
      this.loadData(true);
    },
    //添加
    addCustomer(){
      let frm = this.$refs.customerForm;
      frm.outerVisible = true;
      frm.type = 0;
      frm.title = '客户管理-添加客户信息';
    },
    //修改
    updateCustomer(row){
      let frm = this.$refs.customerForm;
      frm.outerVisible = true;
      frm.type = 1;
      frm.Customer = this.$utils.clone(row);
      frm.title = '客户管理-修改客户信息';
    },
    //订单查看
    checkCustomer(row){
      let frm = this.$refs.customerForm;
      frm.checkCustomer = true;
      frm.Customer = this.$utils.clone(row);
    },
    //模糊查询
    searchData() {
      this.loadData(true);
      this.loadData();
    },
    //客户信息删除
    deleteCustomer(row){
      console.log('row',row)
      this.$operate.remove({
        title:"删除客户信息",
        data: row.overview,
        executeFn: ()=>{
          deleteCustomer(row.id).then(data=>{
            this.loadData();
            this.$notify({
              title: '成功',
              message: '删除成功！！！',
              type: 'success',
            });
            this.fullscreenLoading = true;
            setTimeout(() => {
              this.fullscreenLoading = false
            }, 200);
          });
        }
      });
    },
    //查询所有
    loadData(hint) {
      let params = {
        pageNum: this.no,
        pageSize: this.size,
        name: this.Customer.name,
        khno: this.Customer.khno,
        area: this.Customer.value_area,
        xyd: this.Customer.value_xyd,
        fr: this.Customer.fr,
        state: this.Customer.value_state,
        isValid: this.Customer.value_isValid,
        level: this.Customer.value_level
      }
      if(hint){
        this.loading = true;
      }
      getMarCustomerPageInfo(params).then(data => {
        console.log('data:', data)
        this.t_customer = data.list;
        this.total = data.total;
        setTimeout(() => {
          this.loading = false;
        }, 2000);
      })
    },
    init() {
      this.loadData();
    },
    currentChange(n) {
      this.no = n;
      this.loadData();
    },
  },
  /* 钩子函数 */
  created() {
    this.init();
  }
}
</script>

<style scoped>
.max {
  width: 100%;
  height: 640px;
  background: #ece9e6;
  background: -webkit-linear-gradient(to right, rgb(236, 233, 230), rgb(236, 233, 230));
  background: linear-gradient(to right, rgb(255, 255, 255), rgb(255, 255, 255));
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
  border-radius: 20px;
}
el-table__header{
  /*background-color: rgba(197, 94, 161, 0.65);*/
}

.div1 {
  width: 97%;
  height: 55px;
  border: 0px solid black;
  padding: 30px 15px;
}

.el-input-1 {
  width: 200px;
  margin: 10px;
}

.div2 {
  width: 100%;
  height: 80%;
  border: 1px solid gainsboro;
  margin-top: 20px;

}

.div3 {
  width: 97%;
  height: 35px;
  border: 0px solid gainsboro;
  padding: 10px 15px;
}

.div4 {
  width: 100%;
  height: 70%;
  border: 0px solid gainsboro;
}

table {
  width: 1204px;
  border-collapse: collapse;
  border-spacing: 0;
}
.el-select-dropdown__item{
  width: 100%;
  color: darkgray;
}
/*加载*/
.custom-loading-svg .el-loading-mask > .el-loading-spinner > .circular {
  animation: none;
}
</style>